<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page isELIgnored="false" language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8" %>
<script type="text/javascript">
    $(function(){
        // 2.通过init方法初始化图表
        var maina = echarts.init(document.getElementById('maina'));
        var mainb = echarts.init(document.getElementById('mainb'));
        var mainc = echarts.init(document.getElementById('mainc'));
        $.ajax({
            url:"${pageContext.request.contextPath}/User/selectAllCount1.do",
            dataType:"JSON",
            success:function(data) {

                /*=========地区分布开始==================================*/
                var option1 = {
                    title : {
                        text: '用户地区分布',
                        left: 'center'
                    },
                    tooltip : {
                        trigger: 'item'
                    },
                    legend: {
                        orient: 'vertical',
                        left: 'left',
                        data:['用户人数']
                    },
                    visualMap: {
                        min: 0,
                        max: 2500,
                        left: 'left',
                        top: 'bottom',
                        text:['高','低'],           // 文本，默认为数值文本
                        calculable : true
                    },
                    toolbox: {
                        show: true,
                        orient : 'vertical',
                        left: 'right',
                        top: 'center',
                        feature : {
                            mark : {show: true},
                            dataView : {show: true, readOnly: false},
                            restore : {show: true},
                            saveAsImage : {show: true}
                        }
                    },
                    series : [
                        {
                            name: '用户人数',
                            type: 'map',
                            mapType: 'china',
                            roam: false,
                            label: {
                                normal: {
                                    show: false
                                },
                                emphasis: {
                                    show: true
                                }
                            },
                            data:data.address
                        }
                    ]
                };
                // 3.使用刚指定的配置项和数据显示图表。
                maina.setOption(option1);
                /*================地区分布结束=======================================*/



                /*================性别统计开始=======================================*/
                aa=data.sex.sexcount;
                console.log(aa);
                // 基于准备好的dom，初始化echarts实例
                var mainb = echarts.init(document.getElementById('mainb'));
                console.log(aa+"----------");
                option2 = {
                    title : {
                        text: '某站点用户访问来源',
                        subtext: '纯属虚构',
                        x:'center'
                    },
                    tooltip : {
                        trigger: 'item',
                        formatter: "{a} <br/>{b} : {c} ({d}%)"
                    },
                    legend: {
                        orient: 'vertical',
                        left: 'left',
                        data: [
                            '男','女'
                        ]
                    },
                    series : [
                        {
                            name: '访问来源',
                            type: 'pie',
                            radius : '55%',
                            center: ['50%', '60%'],
                            data:[
                                {value:aa[0].value, name:aa[0].name},
                                {value:aa[1].value, name:aa[1].name},
                            ],
                            itemStyle: {
                                emphasis: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        }
                    ]
                };
                // 使用刚指定的配置项和数据显示图表。
                mainb.setOption(option2);
                /*================性别统计开始结束=======================================*/



                /*================近期注册人数开始结束=======================================*/

                // 基于准备好的dom，初始化echarts实例
                var datac=data.time
                var mainc = echarts.init(document.getElementById('mainc'));
                var option3 = {
                    title : {
                        text: '过去三周用户注册量变化',
                    },
                    tooltip : {
                        trigger: 'axis'
                    },
                    legend: {
                        data:['人数变化']
                    },
                    toolbox: {
                        show : true,
                        feature : {
                            mark : {show: true},
                            dataView : {show: true, readOnly: false},
                            magicType : {show: true, type: ['line', 'bar']},
                            restore : {show: true},
                            saveAsImage : {show: true}
                        }
                    },
                    calculable : true,
                    xAxis : [
                        {
                            type : 'category',
                            boundaryGap : false,
                            data : ['过去三周内','过去两周内','过去一周内']
                        }
                    ],
                    yAxis :{},
                    series : [
                        {
                            name:'注册人数',
                            type:'line',
                            data:[datac.three, datac.two, datac.one],
                            markPoint : {
                                data : [
                                    {type : 'max', name: '最大值'},
                                    {type : 'min', name: '最小值'}
                                ]
                            },
                            markLine : {
                                data : [
                                    {type : 'average', name: '平均值'}
                                ]
                            }
                        }
                    ]
                };
                // 使用刚指定的配置项和数据显示图表。
                mainc.setOption(option3);


                /*================近期注册人数开始结束=======================================*/



            }
        });
    })
</script>
<div id="maina" style="width: 600px;height:400px;"></div>
<div id="mainb" style="width: 600px;height:400px;"></div>
<div id="mainc" style="width: 600px;height:400px;"></div>


